<template>
    <div style="position: relative;">
        <div class="w-form-header">
            <div class="title-box" style="flex: 1;">
                <span class="title">大辦单</span>
            </div>
            <div class="title-box" style="margin-left: auto;">
                <span class="version">
                    版本: {{ formData.version || "暂无" }}</span>
                <span class="status">{{
                    formData.status
                }}</span>

                <span style="font-size: 16px;color: #999;margin-left: 20px">{{
                    formData.printStatus
                }}</span>
            </div>
        </div>
        <div class="gva-form-box admin-content">
            <div class="w-form-box">
                <div class="list-header">基本信息</div>
            </div>
            <van-cell-group>
                <van-cell 
                v-for="(item, key) in detailFormColumns"
                :title="item.label" 
                :value="formData[item.prop] ? (item.formatter ? item.formatter(formData[item.prop], formData) : formData[item.prop]) : '暂无'" 
                />
            </van-cell-group>
            
            <!-- <el-row style="margin-top: 20px" :gutter="20" class="large-order-form">
                <el-col :span="24">
                    <el-form-item label="办单去向: ">
                        <template v-if="formData.cumstomerNum != 'ST101'">
                            <span v-for="(item, index) in dict?.firstOrderDestNoST101" style="margin-right: 12px">{{
                                item.label
                            }}<el-input-number disabled :min="0" :controls="false"
                                    v-model="formData.orderTo[item.label]"
                                    style="margin-left: 8px;width: 33px;" />&ensp;付</span>
                        </template>
                        <template v-else>
                            <span v-for="(item, index) in dict?.firstOrderDestST101" style="margin-right: 12px">{{
                                item.label
                            }}<el-input-number disabled :min="0" :controls="false"
                                    v-model="formData.orderTo[item.label]"
                                    style="margin-left: 8px;width: 33px;" />&ensp;付</span>
                        </template>

                    </el-form-item>
                </el-col>
                <el-col :span="16" v-if="formData.orderTo['其他'] && formData.orderTo['其他'] > 0">
                    <el-form-item :label="`其他原因：`">
                        <el-input v-model="formData.orderTo['otherReason']" disabled type="textarea" :rows="5"
                            placeholder="" :clearable="true" />
                    </el-form-item>
                </el-col>


                
            </el-row> -->
        </div>
    </div>
</template>

<script setup>

import {
    findLargeScaleOrder,
} from "@/api/plmLargeScaleOrder";
import { formatDate } from "@/utils/format";
import { useI18n } from "vue-i18n";
const { t: il8n } = useI18n();
defineOptions({
    name: "LargeOrderProcessingDetail",
});

// 自动获取字典
import { useRoute, useRouter } from "vue-router";
import { ref, unref, reactive, onMounted, watchEffect } from "vue";
const dict = ref({});
const router = useRouter();
const route = useRoute();

const detailFormColumns = ref([]);

const formData = ref({
    firstOrderNum: "",
    customerDemandDate: new Date(),
    cumstomerNum: "",
    customerStyleNum: "",
    updateUser: "",
    updateTime: new Date(),
    orderTo: {},
});


watchEffect(() => {
    //   基本资料 columns
    const newDetailFormColumns = [
        {
            label: "大办单编号",
            prop: "largeScaleNum",
        },
        {
            label: "客户编号",
            prop: "cumstomerNum",
        },
        {
            label: "片弧弯",
            prop: "sheetArcBend",
        },
        {
            label: "For specasavers",
            prop: "isForSpecasavers",
            slot: "isForSpecasavers",
        },
        {
            label: il8n("styleNum.label"),
            prop: "styleNum",
        },
        {
            label: il8n("customerStyleNum.label"),
            prop: "customerStyleNum",
        },
        {
            label: "本厂架倾角度",
            prop: "localTiltAngle",
        },
        {
            label: "完成时间",
            prop: "finishTime",
            needformatter:true,
            formatter: (finishTime) => formatDate(finishTime)
        },
        {
            label: "本厂款号",
            prop: "localStyleNum",
        },
        {
            label: il8n("customerBrand.label"),
            prop: "customerBrand",
        },
        {
            label: "客户架倾角度",
            prop: "customerTiltAngle",
        },
        {
            label: "入仓时间",
            prop: "warehousingTime",
            needformatter:true,
            formatter: (warehousingTime) => formatDate(warehousingTime)
        },
        {
            label: "SBU",
            prop: "sbuNum",
        },
        {
            label: il8n("series.label"),
            prop: "series",
        },
        {
            label: "眼型编号",
            prop: "glassType",
        },
        {
            label: "收货付数",
            prop: "warehousingAmount",
        },
        {
            label: "吉架要求完成",
            prop: "jijiaDemandDate",
            needformatter:true,
            formatter: (jijiaDemandDate) => formatDate(jijiaDemandDate),
        },
        {
            label: "办单类型",
            prop: "orderProcessType",
            slot: "orderProcessType",
        },
        {
            label: "脾型编号",
            prop: "spleenTypeModel",
        },
        {
            label: il8n("createdAt.label"),
            prop: "CreatedAt",
            formatter: (CreatedAt) => formatDate(CreatedAt),
            needformatter:true,
        },
        {
            label: il8n("customerDemandDate.label"),
            prop: "customerDemandDate",
            formatter: (customerDemandDate) => formatDate(customerDemandDate),
            needformatter:true,
        },
        {
            label: "办单付数汇总",
            prop: "orderAmountSum",
            formatter: (orderAmountSum) => orderAmountSum || 0,
        },
        {
            label: "参考首办单",
            prop: "referFirstOrderProcess",
        },
        {
            label: "创建人",
            prop: "createUser",
        },
        {
            label: "PI要求完成日期",
            prop: "piDemandDate",
            needformatter:true,
            formatter: (piDemandDate) => formatDate(piDemandDate),
        },
        {
            label: "附办数量",
            prop: "orderAmount",
        },
        {
            label: "首办回单",
            prop: "firstOrderReceipt",
        },
        {
            label: il8n("updatedAt.label"),
            needformatter:true,
            prop: "UpdatedAt",
            formatter: (UpdatedAt) => formatDate(UpdatedAt),
        },
        {
            label: "PI单号",
            prop: "piOrderNum",
        },
        {
            label: "生产地点",
            prop: "transferOrder",
        },
        {
            label: "首办单回单备注",
            prop: "firstOrderReceiptNote",
        },
        {
            label: il8n("updateUser.label"),
            prop: "updateUser",
        },
        {
            label: "参与周期计算",
            prop: "isCycleCountIn",
        },
        {
            label: "新款",
            prop: "isNewStyle",
        },
        {
            label: "印资",
            prop: "requireLetterpressMaterial",
        },
        {
            label: "办单去向",
            prop: "tempOrderTo",
        },
        {
            label: "制作部門",
            prop: "productionDepartment",
        },
        {
            label: "款式备注",
            prop: "productStyleNote",
        },
        {
            label: "大办单备注",
            prop: "largeScaleNote",
        },
        {
            label: "刻字模备注",
            prop: "engraveMoldNote",
        },
        {
            label: "附办说明",
            prop: "engraveMoldNote",
        },
        {
            label: "附办说明",
            prop: "orderExplain",
        },
        {
            label: "修改备注",
            prop: "modifyNote",
        },
    ];
    
   
    detailFormColumns.value = newDetailFormColumns;
});

onMounted(async () => {
    getFindLargeOrderProcessingDetail();
});

async function getFindLargeOrderProcessingDetail() {
    const {
        query: { largeScaleNum },
    } = route;
    const res = await findLargeScaleOrder({ largeScaleNum });
    if (res.code === 0) {
        const {
            data: {
                relargeScaleOrder,
            },
        } = res;
        console.log('relargeScaleOrder======>', relargeScaleOrder)
        formData.value = relargeScaleOrder;
        const { orderTo = {} } = relargeScaleOrder;
        if (orderTo) {
            let temp = '';
            for (let key in orderTo) {
                if (orderTo.hasOwnProperty(key)) {
                    temp = temp + `${key}${orderTo[key]}付 `
                }
            }
            console.log('办单去向=======>', temp)
            formData.value.tempOrderTo = temp;
        }
        
    }
}

</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-box {
    display: flex;
    align-items: center;

    .title {
        font-size: 13px;
        color: rgba(173, 173, 173, 1);
    }
}

.list-header {
    margin-top: 20px;
}

</style>
